<template>
  <div class="status-panel">
    <span>当前操作: </span>
    <span style="font-weight: bold" v-if="showFlag">
      <span>{{ currentOperation.title }}</span>
    </span>
    <el-button
      style="margin-left: 20px"
      v-if="showFlag"
      type="text"
      @click="exit"
      >退出</el-button
    >
    <span
      style="padding-left: 15px; color: red; font-weight: bold"
      v-if="
        currentOperation &&
        currentOperation.type === 'link' &&
        currentObj.NodeIndex
      "
      >注意：</span
    >
    <span
      style="padding-left: 15px"
      v-if="
        currentOperation &&
        currentOperation.type === 'link' &&
        currentObj.NodeIndex == 1
      "
      >请选中第一个节点</span
    >
    <span
      style="padding-left: 15px"
      v-if="
        currentOperation &&
        currentOperation.type === 'link' &&
        currentObj.NodeIndex == 2
      "
      >请选中第二个节点</span
    >
    <el-dialog
      title="线路基本信息"
      :visible="visible"
      width="300px"
      @close="visible = false"
    >
      <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
        <el-form-item label="线路名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="电报码" prop="dbm">
          <el-input v-model="formData.dbm"></el-input>
        </el-form-item>
        <el-form-item label="线路颜色" prop="color">
          <div style="display: flex">
            <el-input v-model="formData.color" readonly></el-input>
            <el-color-picker v-model="formData.color"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="线路状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择">
            <el-option
              v-for="item in status1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  components: {},
  computed: {
    ...mapState([
      "currentOperation",
      "currentLine",
      "linesOptions",
      "currentObj",
    ]),
    showFlag() {
      if (this.currentOperation && this.currentOperation.type == "links") {
        if (this.currentLine.dbm) {
          if (this.currentOperation.title) return true;
          return true;
        }
        return false;
      } else {
        if (this.currentOperation && this.currentOperation.title) return true;
        return false;
      }
    },
  },
  watch: {
    currentOperation: function () {
      if (this.currentOperation && this.currentOperation.type === "links") {
        this.visible = true;
      }
    },
  },
  mounted() {},
  data() {
    return {
      visible: false,
      status1: [
        {
          value: 1,
          label: "运营中",
        },
        {
          value: 0,
          label: "未开通",
        },
      ],
      formData: {
        name: "1号线",
        dbm: "SHA",
        color: "#000000",
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入线路名", trigger: "blur" }],
        dbm: [{ required: true, message: "请输入线路电报码", trigger: "blur" }],
        color: [{ required: true, message: "请选择颜色", trigger: "change" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  methods: {
    ...mapMutations(["setData"]),
    exit() {
      this.setData({
        currentOperation: {},
        currentOperationChangeFlag: true,
      });
    },
    handleCancel() {
      this.formData = {
        name: "",
        dbm: "",
        color: "",
        status: 1,
      };
      this.$emit("close", { flag: false });
    },
    onSubmit() {
      this.visible = false;
      // 将操作数据和设置的数据合并起来全部放到currentPen中
      this.setData({
        currentLine: this.formData,
        currentObj: {
          ...this.currentOperation,
          ...this.formData,
        },
        linesOptions: {
          ...this.linesOptions,
          [this.formData.name]: { ...this.formData },
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.status-panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
